@charset "utf-8";
@import "./_flexble.scss";

dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}
a{text-decoration: none;}
li{list-style: none;}
img{border: none;outline: none;}
zgbHtml.html,body{
    height: 100%;
    width: 100%;
    margin:0;
	background: #f2f3f5;
}

[v-cloak] {
  display: none;
}

.loding{
//  position: fixed;
//  bottom: 0;
    width: 100%;
    height: 30px;
//  background: #FFFFFF;
}

.imgHeight{
    height: 100%;
}
.imgWidth{
    width: 100%;
}

@media screen and (max-width: 320px) {
    #replyBg{
        .replyMesHead{
            >span{
                font-size: rem(16) !important;
            }
            margin-bottom: rem(4) !important;
        }
    }
    .cfCont{
        ul{
            li{
                width: rem(43) !important;
            }
        }
    }
    
    #calendar{
        td{
            >p{
                line-height: 29px !important;
                width: 29px !important;
                height: 29px !important;
                border-radius: 100% !important;
            }
        }
    }
}

#message,#messageDetails{
    background: #F2F3F5;
    height: 100%;
    .messageUl{
//      padding-bottom: 30px;
        >li{
            background: #FFFFFF;
            width: 100%;
            margin-bottom: rem(10);
            overflow: hidden;
        }
    }
    
    .mesHeadBg{
        padding: rem(7) 0 rem(12) 0;
        overflow: hidden;
        .mesHead{
//          width: rem(360);
            height: rem(32);
            padding-left: rem(15);
            line-height: rem(31);
            font-size: rem(16);
            >span{
                color:#8d9199;
            }
        }
        .line{
            margin:rem(7) 0 0 rem(59);
            height: 1px;
            background: #e1e3e6;
        }
    }
    
    .time{
        float: right;
        font-size: rem(12);
        margin-right: rem(15);
        color:#c8c9cc;
    }
    
    .mesCont{
        /*text-align: center;*/
        font-size: rem(14);
        padding: 0 rem(15) 0 rem(59);
        margin: 0 auto;
        .mesTitle{
            font-size: rem(16);
            overflow:hidden; 
            text-overflow:ellipsis;
            display: -webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
            text-align: left;
        }
        
    }
    .imgsBg{
//      margin-right: rem(60);
        
        margin-top: rem(12);
        figure{
            margin: 0;
            float: left;
            overflow: hidden;
            margin-bottom: rem(8);
            position: relative;
            >div{
                line-height: rem(80);
                img{
                    -webkit-transform: translate(-50%,-50%);
                    -moz-transform: translate(-50%,-50%);
                    -ms-transform: translate(-50%,-50%);
                        transform: translate(-50%,-50%);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                }
            }
        }
        >p{
            clear: both;
            font-size: rem(12);
            text-align: left;
            color: #c8c9cc;
            padding: rem(5) 0;
        }
    }
    
    .imgLen1 figure{
        width: rem(160);
        height: rem(160);
        >div{
            width: rem(160);
            height: rem(160);
        }
    }
    
    .imgLens figure{
//      background: red;
        width: rem(80);
        height: rem(80);
        margin-right: rem(8);
        >div{
            width: rem(80);
            height: rem(80);
        }
    }
    
}

.headPortrait{
    width: rem(32);
    height: rem(32);
    border-radius: 4px;
    float: left;
    overflow: hidden;
    margin-right: rem(12);
    position: relative;
    >img{
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        position: absolute;
        top: 50%;
        left: 50%;
    }
}

.cfHead{
    margin: 0 rem(15) rem(12);
    height: 31px;
    line-height: 31px;
    border-bottom: 1px solid #e1e3e6;
    >h3{
        font-size:rem(14);
        font-weight: 400;
        display: inline-block;
    }
    >span{
        float: right;
        i{
            font-style: normal;
        }
    }
}

#messageDetails{
    .mesCont{
        >p{
            font-size: rem(16);
        }
    }
}

.confirmBg{
    width: 100%;
    background: #FFFFFF;
    color:#939599;
    margin-bottom: rem(10);
    .cfCont{
        overflow: hidden;
        padding: 0 rem(15);
        &.more{
            .userList{
                width: auto;
                height: auto;
            }
            .moreBtn{
                display: none;
            }
        }
        .userList{
            width: rem(301);
            height: rem(55.5);
            float: left;
            overflow: hidden;
            li{
                width: rem(37);
                float: left;
                margin-right: rem(6);
                >div{
                    width: rem(32.5);
                    height: rem(32.5);
                    margin: 0 auto;
                    position: relative;
                    overflow: hidden;
                    border-radius: 4px;
                    img{
                        -webkit-transform: translate(-50%,-50%);
                        -moz-transform: translate(-50%,-50%);
                        -ms-transform: translate(-50%,-50%);
                            transform: translate(-50%,-50%);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                    }
                }
                >p{
                    text-align: center;
                    font-size: rem(12);
                    color:#5c5f66;
                    padding: rem(4) 0;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    -o-text-overflow:ellipsis;
                    white-space:nowrap;
                }
            }
        }
        .imgInitial{
            width: rem(37);
            float: left;
            >div{
                width: rem(32.5);
                height: rem(32.5);
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                border-radius: 4px;
            } 
            >p{
                color:#c4c6cc !important;
                text-align: center;
                font-size: rem(12);
                padding: rem(4) 0;
            }
            img{
                width: 100%;
                position:static !important;
                transform:none !important;
            }
        }
    }
}

#replyBg{
    @extend .confirmBg;
    margin-bottom: 0;
    .replyHead{
        @extend .cfHead;
        >div{
            width: rem(18);
            height: rem(18);
            display: table-cell;
            vertical-align:middle;
            float: left;
            >img{
                width: 100%;
                vertical-align:middle;
            }
        }
        >span{
            float: none;
            margin-left: rem(6);
        }
    }
    li{
        padding-left: rem(15);
        margin-bottom: rem(10);
        overflow: hidden;
        .headPortrait{
            margin-top: rem(3);
        }
        .replyMes{
            width: rem(316);
            border-bottom: 1px solid #e1e3e6;
            padding-bottom: rem(10);
            float: right;
            .replyMesHead{
                margin-bottom: rem(1);
                >span{
                    font-size: rem(14);
                }
                .time{
                    line-height: rem(19);
                    font-size: rem(12);
                }
            }
            >p{
                font-size:rem(16);
                color:#292c33;
                line-height:rem(25);
            }
        }
        &.last{
            margin-bottom: 0;
            .replyMes{
                border-bottom: none;
            }
        }
    }
    
}

//筑工邦用户协议界面
#agreement{
    padding: 0 rem(14) 0 rem(16);
    >div{
        margin-top: rem(20);
        >h2{
            font-size:rem(16);
            color:#292c33;
            font-weight: 400;
            margin-bottom: rem(15);
        }
        >p{
            text-align: justify;
            font-size:rem(14);
            color:#5c5f66;
            line-height: rem(22);
            margin-bottom: rem(10);
        }
    }
    ul{
        margin-top: rem(-5);
        margin-bottom: rem(10);
        >li{
            text-indent: rem(18);
            line-height: rem(19);
            font-size:rem(14);
            color:#5c5f66;
            text-align: justify;
        }
    }
    .agr1{
        >p{
            text-indent: rem(18);
        }
    }
}

//考勤记账公用：
.contBg{
    height: 100%;
    padding: 0 rem(15);
    background:#f2f3f5;
    li{
        padding-top: rem(18);
        >h6{
            color:#5c5f66;
            font-weight: 400;
            font-size: rem(12);
            margin-bottom: rem(5);
        }
        >.cont{
            padding: 0 rem(15) rem(14);
            background: #FFFFFF;
            >table{
                width: 100%;
                font-size:rem(14);
                text-align: center;
                >thead{
                    th{
                        color:#939599;
                        font-weight: 400;
                        padding: rem(8) 0;
                        width: rem(58);
                        border-bottom: 1px solid #e1e3e6;
                    }
                }
                >tbody{
                    td{
                        padding-top: rem(12);
                        &.status1{
                            color:#292c33;
                        }
                        &.status2{
                            color:#8d9199;
                        }
                        &.status3{
                            >a{
                                color:#ff7733;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
}

//考勤汇总公用部分：
.Summary{
    .title{
        overflow: hidden;
        width: 100%;
        background:#f2f3f5;
        padding: rem(20) 0;
        font-size: rem(14);
        >.titleCont{
            overflow: hidden;
            padding: rem(9) rem(15);
            background: #FFFFFF;
            .headPortrait{
                border-radius:5px;
            }
            .text{
                float: left;
                >p{
                    font-size:rem(16);
                    color:#292c33;
                }
                >span{
                    color:#939599;
                }
            }
            .time{
                height:rem(32);
                line-height:rem(32);
                float: right;
                color:#5c5f66;
                >span{
                    color:#ff7733;
                }
            }
        }
    }
    .attendanceList{
        padding-left: rem(15);
        >li{
            font-size: rem(16);
            height: rem(47);
            line-height: rem(47);
            border-bottom: 1px solid #e1e3e6;
            overflow: hidden;
            b{
                font-weight: 400;
                color:#292c33;
            }
            span{
                float: right;
                margin-right: rem(13);
                color:#8d9199;
                i{
                    font-style: normal;
                }
            }
        }
    }
    .circularBg{
        padding: rem(22) 0;
        .circular{
            margin: 0 auto;
            width:rem(154);
            height:rem(154);
//          line-height: rem(154);
            background: #ff7733;
            border:5px solid #ffdcca;
            border-radius:100%;
            text-align: center;
            color:#ffffff;
            font-size: rem(12);
            >div{
                font-size: rem(22);
                margin: rem(5) 0 rem(6);
            }
            >p{
                margin-top: rem(42);
            }
        }
    }
    h5{
        background:#f2f3f5;
        height:rem(49);
        line-height: rem(49);
        padding-left: rem(15);
        color:#939599;
        font-weight: 400;
        font-size: rem(12);
    }
}

#teamAttendanceMonthSummary{
    .headPortrait{
        width:rem(48);
        height:rem(48);
    }
    .time{
        height:rem(48);
        line-height:rem(48);
    }
    .circular{
        div{
            font-size: rem(30);
        }
    }
    .teamTable{
        padding: 0 rem(15);
        table{
            width: 100%;
            text-align: center;
            th{
                padding: rem(13) 0;
                font-weight: 400;
                font-size:rem(16);
                color:#292c33;
                border-bottom: 1px solid #e1e3e6;;
            }
            td{
                padding: rem(11) 0;
                font-size:rem(12);
                color:#5c5f66;
                border-bottom: 1px solid #e1e3e6;;
            }
        }
    }
}

#teamAttendanceDailySummary{
    .title{
        >.titleCont{
            padding: rem(12) rem(15);
        }
    }
    .headPortrait{
        width:rem(48);
        height:rem(48);
    }
    .time{
        height:rem(48);
        line-height:rem(48);
        font-size: rem(12);
        color:#8d9199;
    }
    .circular{
        >p{
            margin-top: rem(50);
        }
    }
    .attendanceList{
        >li{
            overflow: hidden;
            span{
                margin-right: 0;
            }
            img{
                margin: rem(12) rem(10);
                float: right;
            }
        }
    }
    
//  .teamNum{
//      text-align: center;
//      height: rem(48);
//      line-height: rem(48);
//      color:#939599;
//  }
}

#myAttendanceMonthSummary{
    .text{
        height:rem(32);
        line-height:rem(32);
    }
    .record{
        li{
            padding: rem(18);
//          border-bottom: 1px solid #f2f3f5;
            >p{
                font-size:rem(16);
                color:#292c33;
                margin-bottom: rem(5);
            }
            >span{
                color:#939599;
                font-size:rem(14);
                b{
                    font-weight: 400;
                }
            }
        }
    }
}

#myAttendanceDailySummary{
    background:#f2f3f5;
    .text{
        height:rem(32);
        line-height:rem(32);
    }
    .time{
        font-size: rem(12);
        color:#8d9199;
    }
    .attendanceQuantity{
        background:#FFFFFF;
        margin-top: rem(-6);
        border-top: 1px solid #e1e3e6;
        padding: rem(10) rem(15);
        font-size: rem(16);
        >span{
            color: #FF7733;
        }
    }
    .attendanceRecord{
        overflow: hidden;
        padding: rem(15) rem(15);
        background: #FFFFFF;
        >li{
            overflow: hidden;
            padding-bottom: rem(60);
            &:last-child{
                padding-bottom: 0;
            }
            .left{
                float: left;
                background:#8d9199;
                width:rem(23);
                height:rem(23);
                line-height: rem(23);
                text-align: center;
                border-radius:100%;
                font-size:rem(12);
                color:#ffffff;
                position: relative;
                .line{
                    background:#e1e3e6;
                    width:1px;
                    height:rem(140);
                    position: absolute;
                    left: 50%;
                    -webkit-transform: translate(-50%,1%);
                    -moz-transform: translate(-50%,-50%);
                    -ms-transform: translate(-50%,-50%);
                        transform: translate(-50%,1%);
                    z-index: 10;
                }
            }
            .right{
                float: left;
                margin-left: rem(6);
                >p{
                    padding-left: rem(3);
                    font-size:rem(14);
                    color:#939599;
                    margin-bottom: rem(5);
//                  height: rem(20);
                    line-height: rem(20);
                    >img{
                        padding-top: rem(3);
                        vertical-align:top;
                    }
                    >span{
                        display: inline-block;
                        width: rem(260);
                    }
                }
                .attendanceStatus{
                    >span{
                        text-align: center;
                        border-radius: 25px;
                        display: inline-block;
                        font-size:rem(12);
                        color: #FFFFFF;
                        width:rem(40);
                        height:rem(18);
                        line-height: rem(18);
                        &.normal{
                            background:#b1e067;
                        }
                        &.abnormal{
                            background:#ff4d4d;
                        }
                        &.face{
                            width:rem(70);
                            background:#ffb792;
                        }
                    }
                }
            }
        }
    }
}

#teamAttendanceDailyList{
    li{
        overflow: hidden;
        padding: rem(12) rem(15);
        .headPortrait{
            width:rem(48);
            height:rem(48);
        }
        .personalMes{
            height:rem(48);
            float: left;
            h3{
                margin-top: rem(3);
                font-size:rem(16);
                font-weight: 400;
                color:#292c33;
            }
            p{
                margin-top: rem(5);
                font-size:rem(12);
                color:#939599;
            }
        }
    }
}

#calendar{
    background:#FFFFFF;
    padding:rem(10);
    overflow: hidden;
    ul{
        text-align: center;
        width: 100%;   
        font-size: rem(14);
        >li{
            margin: 0 rem(9.2);
            width: rem(32);
            height: rem(32);
            text-align: center;
            line-height: rem(33);
            font-weight: 400;
            color:#5c5f66;
            float: left;
            border-radius:rem(16);
        }
    }
    .dateCont{
        >li{
            margin: rem(9) rem(9.2);
            &.active{
                background:#ff7733;
                color:#ffffff;
            }
            >span{
                margin: 2px auto 0;
                display: block;
                width:4px;
                height:4px;
                border-radius:25px;
                &.normal{
                    background:#b1e067;
                }
                &.abnormal{
                    background:#ff0000;
                }
            }
        }
    }
}

//帮助中心
#help{
    >li{
        height: rem(48);
        padding-left: rem(15);
//      border: 1px solid red;
        line-height: rem(48);
        letter-spacing:0;
        font-size:rem(16);
        color:#292c33;
        overflow: hidden;
        >img{
            margin: rem(12) rem(10);
            float: right;
        }
    }
}

#helpDetail{
    h1{
        height: rem(48);
        padding-left: rem(15);
        line-height: rem(48);
        letter-spacing:0;
        font-size:rem(16);
        color:#292c33;
        font-weight: 400;
        border-bottom: 1px solid #e1e3e6;
    }
    p{
        font-size:rem(16);
        color:#5c5f66;
        text-align:justify;
        padding: rem(10) rem(15);
        text-indent: 2em;
    }
}
